<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/static/lib/vue.js"></script>
    <script src="/static/lib/datav.map.vue.js"></script>
    <link rel="stylesheet" href="/static/lib/common.css">
    <link rel="stylesheet" href="/static/lib/button.css">
    <title>百科荣创-无人驾驶</title>
</head>

<body>

    <div id="app">
        <dv-full-screen-container>
            <div style="margin-bottom: 10px;display: flex;justify-content: center;margin-top: 50px;">
                <dv-decoration-1 style="width:15%;height:50px;margin-right: 10px;transform:rotate(180deg);">
                </dv-decoration-1>
                <h1 style="width:35%; font-size: 40px; text-align: center;color: aliceblue;font-weight: 600;">自动驾驶 —
                    无人车</h1>
                <dv-decoration-1 style="width:15%;height:50px;margin-left: 10px;"></dv-decoration-1>
                <a href="/" class="button button-primary button-rounded button-large" style="position: absolute; right:20px;">切换智慧交通视图模式</a>
            </div>

            <div style="margin-bottom: 10px;display: flex;justify-content: space-around;">
                <div style="width: 49%;">
                    <dv-decoration-11
                        style="margin:auto;width:250px;height:45px;color:aliceblue;font-size: 17px;font-weight: 400;">
                        &nbsp;&nbsp;云台摄像头图像&nbsp;&nbsp;</dv-decoration-11>
                    <dv-border-box-4 style="width:90%;margin:auto;height:430px;text-align: center;margin-bottom: 20px;">
                        <img src="/videostreamIpc/"
                            style="width:90%;height:85%;object-fit:fill;margin-top: 40px;" />
                    </dv-border-box-4>
                    <dv-decoration-11
                        style="margin:auto;width:250px;height:45px;color:aliceblue;font-size: 17px;font-weight: 400;">
                        &nbsp;&nbsp;固定摄像头图像&nbsp;&nbsp;</dv-decoration-11>
                    <dv-border-box-4 :reverse="true" style="width:90%;margin:auto;height:430px;text-align: center;">
                        <img src="/videostreamCsi/"
                            style="width:90%;height:85%;object-fit:fill;margin-top: 30px;" />
                    </dv-border-box-4>
                </div>
                <dv-decoration-2 :reverse="true" style="width:2%;height:950px;"></dv-decoration-2>
                <div style="width: 49%;">
                    <dv-border-box-10 :reverse="true"
                        style="width:110%;margin:auto;height:315px;text-align: center;margin-bottom: 20px;margin-top: 10px;">
                        <div style="color: aliceblue;font-size: 30px;padding-top: 20px;">
                            <div style="width: 50%;float: left;font-size: 20px;text-align: center;">
                                <div id="connect-msg" style="text-align: left;padding-left: 20px;line-height: 1.6;" >
                                    <div style="float: left;width: 50%;">连接状况:<span>未知</span></div>
                                    <div style="float: left;width: 43%;"> &nbsp;</div>
                                    <div style="float: left;width: 50%;">无人车插件:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">大赛插件:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">串口插件:<span>未知</span></div>
                                    <div style="float: left;width: 50%;">串口状态:<span>未知</span></div>
                                </div>
                                <div style="position: absolute;left:270px;">
                                    <a href="javacript:void(0);" class="button button-primary button-small" style="font-size: 16px;">模式跟随</a>
                                </div>
                                <dv-border-box-8 style="height:174px;margin: 5px 20px; width: 90%;margin-top: 110px;">
                                    <div style="font-size: 16px;text-align: left;padding: 10px;padding-bottom: 0px;">
                                        交通灯识别：</div>
                                    <img src="/static/img/light1.png" style="width:80%;object-fit:fill;margin-top: 0px;">
                                </dv-border-box-8>
                            </div>
                            <div style="width: 50%;float: left;">
                                <dv-border-box-7 style="width: 80%;height: 280px;">
                                    <div style="text-align: left;font-size: 16px;padding: 10px;">行驶日志：</div>
                                    <div id="log-div"
                                        style="overflow-y: scroll;font-size: 16px;height: 230px;text-align: left;padding-left: 20px;">
                                        
                                    </div>
                                </dv-border-box-7>
                            </div>
                        </div>
                    </dv-border-box-10>
                    <dv-decoration-2 style="width:100%;height:5px;margin-bottom: 15px;transform:rotate(180deg);">
                    </dv-decoration-2>
                    <dv-border-box-10 :reverse="true"
                        style="width:110%;margin:auto;height:600px;text-align: center;margin-bottom: 20px;">

                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 10px;left: 10px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">阿克曼方向控制：</div>
                            <div style="margin: 5px 20px;">
                                <div id="box" class="box" width="70%" style="width: 297px;
                                float: left;
                                background-image: url('/static/img/fxp.png');
                                height: 230px;
                                background-size: auto 100%;
                                background-repeat: no-repeat;
                                background-position: center;">
                                </div>
                                <div style="color: aliceblue;float: left;font-size: 20px;">
                                    手动转向值：
                                    <div id="fxp-val">0（摆正）</div>
                                    <div style="margin-top:20px;">
                                        回传转向值：
                                        <div>0（摆正）</div>
                                        <img src="/static/img/fxp.png" width="90px" style="margin-top: 5px;">
                                    </div>
                                </div>
                            </div>

                        </dv-border-box-12>
                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 10px;left: 480px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">阿克曼推进控制：</div>
                            <div>
                                <input type="range" min="-100" max="100" id="range"
                                    style="float: left;-webkit-transform:rotate(270deg); margin-top: 100px;margin-left: 70px;">
                                <div style="color: aliceblue;font-size: 20px;margin-top: 10px;">油门值：<div id="power-val">
                                        0</div>
                                </div>
                                <button id="stop-btn" class="button button-3d button-box button-jumbo"
                                    style="margin-left: 10px;width: 100px;margin-top: 50px;">刹车</button>
                            </div>
                        </dv-border-box-12>
                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 302px;left: 10px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">云台控制：</div>
                            <div style="margin-top: 10px;">
                                <button class="button button-3d button-circle button-jumbo" msg="yun-u">↑</button>
                            </div>
                            <div style="margin-top: 15px;">
                                <button class="button button-3d button-circle button-jumbo" msg="yun-l"
                                    style="margin-right: 10px;">←</button>
                                <button class="button button-3d button-circle button-jumbo" msg="yun-c"
                                    style="font-size:18px;">reset</button>
                                <button class="button button-3d button-circle button-jumbo" msg="yun-r"
                                    style="margin-left: 10px;">→</button>
                            </div>
                            <div style="margin-top: 15px;">
                                <button class="button button-3d button-circle button-jumbo" msg="yun-d">↓</button>
                            </div>
                        </dv-border-box-12>
                        <dv-border-box-12
                            style="width:465px;height:272px;padding-top: 20px;position: absolute;top: 302px;left: 480px;">
                            <div style="text-align: left;color: aliceblue;margin-left: 20px;">托管控制：</div>
                            <div style="color: aliceblue;margin: 20px 0;">
                                当前状态：<span>手动模式</span>
                            </div>
                            <div style="margin-top: 10px;">
                                <span class="button-wrap">
                                    <a href="#" class="button button-pill button-raised button-primary">切换托管模式</a>
                                  </span>
                            </div>
                            <div style="margin-top: 10px;">
                                <span class="button-wrap">
                                    <a href="#" class="button button-pill button-raised button-primary">切换手动模式</a>
                                  </span>
                            </div>
                        </dv-border-box-12>

                    </dv-border-box-10>

                </div>

            </div>

        </dv-full-screen-container>

    </div>

    <script src="/static/lib/jquery.min.js"></script>
    <script>
        $("document").ready(function () {
            // 方向盘控制
            var isMove = false;
            $("#range").val(0)
            $('#box').on("mousedown touchstart", function (event) {
                const element = event.target;
                const rect = element.getBoundingClientRect();
                element.dataset.centerX = rect.left + rect.width / 2;
                element.dataset.centerY = rect.top + rect.height / 2;
                element.dataset.angle = getDragAngle(event);
                isMove = true;
                event.target.style.transform = 'rotate(0rad)';
            });

            $('#box').on("mousemove touchmove", function (event) {
                if (isMove) {
                    var angleRad = getDragAngle(event);

                    var el = document.getElementById("box");
                    var st = window.getComputedStyle(el, null);
                    var tr = st.getPropertyValue("-webkit-transform") ||
                        st.getPropertyValue("-moz-transform") ||
                        st.getPropertyValue("-ms-transform") ||
                        st.getPropertyValue("-o-transform") ||
                        st.getPropertyValue("transform") ||
                        "FAIL";
                    var values = tr.split('(')[1].split(')')[0].split(',');
                    var a = values[0];
                    var b = values[1];
                    var c = values[2];
                    var d = values[3];
                    var scale = Math.sqrt(a * a + b * b);
                    var sin = b / scale;
                    var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

                    if (Math.abs(angle) < 90) {
                        $("#fxp-val").html(Math.abs(angle) + (angle > 0 ? "（右转）" : "（左转）"));
                        event.target.style.transform = 'rotate(' + angleRad + 'rad)';
                    }
                }
            });

            $('#box').on("mouseup touchend", function (event) {
                isMove = false;
                fxpVal = 0;
                $("#fxp-val").html("0（摆正）");
                event.target.dataset.angle = 0;
                event.target.style.transform = 'rotate(' + 0 + 'deg)';
            });

            function getDragAngle(event) {
                var element = event.target;
                var startAngle = parseFloat(element.dataset.angle) || 0;
                var center = {
                    x: parseFloat(element.dataset.centerX) || 0,
                    y: parseFloat(element.dataset.centerY) || 0,
                };
                if (event.type.indexOf("mouse") == -1) {
                    var _touch = event.originalEvent.targetTouches[0];
                    var angle = Math.atan2(center.y - _touch.pageY, center.x - _touch.pageX);
                    return angle - startAngle;
                } else {
                    var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
                    return angle - startAngle;
                }

            }

            $("#stop-btn").click(function () {
                $("#range").val(0)
                $("#power-val").html(0)
            })
            $("#range").on("input propertychange", function () {
                $("#power-val").html(($(this).val()))
            });
            // var int = setInterval("testaa()", 1000);
            // $.get("http://192.168.58.32:8080/carContestStatusLog", {}, function (res) {
            //     var json = JSON.parse(res);
            //     console.log(json['CAR_RUNTIME_STATUS'])
            // })

            setInterval("task()", 2000);

            $(".button").click(function (e) {
                var msg = $(e.target).attr("msg");
                switch (msg) {
                    case "model-btn":
                    sendHttp("runModelSwitch", {"modelName":"contest"}, function (res) {
                        if(res=="ok"){
                            addLog("手动刷新连接状态成功");
                        }
                    });
                    break;
                    case "yun-u":
                    sendHttp("cameraControl", {"commandField":"up"}, function (res) {
                        addLog("手动云台摄像头控制成功-向上");
                    });
                    break;
                    case "yun-c":
                    sendHttp("cameraControl", {"commandField":"CENTER"}, function (res) {
                        addLog("手动云台摄像头控制成功-置中");
                    });
                    break;
                    case "yun-d":
                    sendHttp("cameraControl", {"commandField":"DOWN"}, function (res) {
                        addLog("手动云台摄像头控制成功-向下");
                    });
                    break;
                    case "yun-l":
                    sendHttp("cameraControl", {"commandField":"LEFT"}, function (res) {
                        addLog("手动云台摄像头控制成功-左转");
                    });
                    break;
                    case "yun-r":
                    sendHttp("cameraControl", {"commandField":"RIGHT"}, function (res) {
                        addLog("手动云台摄像头控制成功-右转");
                    });
                    break;
                }
            })
        })

        function task() { 
            sendHttp("carPluginStatus", {}, function (res) {
                $("#connect-msg").html(
                    '<div style="float: left;width: 50%;">连接状况:<span>已连接</span></div>'+
                    '<div style="float: left;width: 50%;">&nbsp;</div>'+
                    '<div style="float: left;width: 50%;">无人车插件:<span>'+(res.driver_plugin_run_status=="stop"?"已停止":"运行中")+'</span></div>'+
                    '<div style="float: left;width: 50%;">智慧交通插件:<span>'+(res.task_plugin_run_status=="stop"?"已停止":"运行中")+'</span></div>'+
                    '<div style="float: left;width: 50%;">串口插件:<span>'+(res.serial_plugin_run_status=="stop"?"已停止":"运行中")+'</span></div>'+
                    '<div style="float: left;width: 50%;">串口状态:<span>'+(res.serial_connection_status==0?"未应答":"已应答")+'</span></div>'
                )
            });
        }

        function sendHttp(url, data = {}, success) {
            $.ajax({
                type: "POST",
                url: "/" + url,
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify(data),
                success: function (data) {
                    if (success != null) {
                        success(data)
                    }
                },
                error: function (param) {
                    addLog("访问\"" + url + "\"失败了");
                }
            });
        }

        function addLog(msg){
            $("#log-div").append("<div>"+getCurrentDate(new Date())+"-"+msg+"</div>");
            $('#log-div').scrollTop($("#log-div")[0].scrollHeight);
            if($("#log-div").children().length>100){
                $("#log-div").children()[0].remove();
            }
        }
        function getCurrentDate(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            var h = date.getHours();
            var min = date.getMinutes();
            var s = date.getSeconds();
            // var str = y + '年' + (m < 10 ? ('0' + m) : m) + '月' + (d < 10 ? ('0' + d) : d) + '日  ' + (h < 10 ? ('0' +
            //     h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? ('0' + s) : s);
            var str = (h < 10 ? ('0' + h) : h) + ':' + (min < 10 ? ('0' + min) : min) + ':' + (s < 10 ? ('0' + s) : s);
            return str;
        }

        var app = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>
    <style>
        #dv-full-screen-container {
            background-image: url('/static/img/study-chart-bg.png');
        }

        input[type="range"] {
            border-radius: 15px;
            -webkit-appearance: none;
            height: 20px;
            width: 150px;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            cursor: default;
            height: 50px;
            width: 50px;
            background: none repeat scroll 0 0 rgb(75, 75, 75);
            border-radius: 15px;
            -webkit-box-shadow: 0 -1px 1px black inset;
        }
    </style>
</body>

</html>